<template>
    <Card style="height: 100%">
        <Button type="primary" style="margin-bottom: 20px" @click="addProduct">新增项目</Button>
        <Form ref="FormInline" v-model="searchForm" inline :label-width="80">
            <FormItem label="项目名称">
                <Input v-model="searchForm.name" placeholder="支持模糊匹配"/>
            </FormItem>
            <FormItem label="是否参与">
                <Select placeholder="是否参与该项目" v-model="searchForm.member_me" @change="memberChange"
                        style="width: 150px">
                    <Option v-for="item in memberOptionData" :value="item.value" :key="item.value">{{
                        item.name
                        }}
                    </Option>
                </Select>
            </FormItem>
            <FormItem label="是否公开">
                <Select placeholder="项目是否公开" v-model="searchForm.is_private" @change="privateChange"
                        style="width: 150px">
                    <Option v-for="item in privateOptionData" :value="item.value" :key="item.value">{{
                            item.name
                        }}
                    </Option>
                </Select>
            </FormItem>
        </Form>
        <div slot="extra">
            <Button type="primary" style="margin-right:8px;" @click="query">查询</Button>
            <Button style="margin-right:8px;" @click="handleReset">重置</Button>
        </div>
        <Table :columns="columns" :data="data" :loading="loading">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row.id)">编辑</Button>
                <Button type="error" size="small" @click="remove(row.id)">删除</Button>
            </template>
        </Table>
        <div style="margin-top: 10px;float: right">
            <Page :total="total" :current="searchForm.page" :page-size="searchForm.size" @on-change="handleChange"
                  @on-page-size-change="handleSize" show-sizer show-total show-elevator/>
        </div>

        <Modal v-model="visible" :title="title" width="45">
            <Form ref="formValidate" :model="productForm" :rules="ruleProductForm" :label-width="80">
                <FormItem label="项目名称" prop="name">
                    <Input v-model="productForm.name" placeholder="请输入项目名称"/>
                </FormItem>
                <FormItem label="项目成员" prop="participants">
                    <Select v-model="edit ? selectedParticipants : productForm.participants" multiple placeholder="请选择项目成员,不选默认只有当前登陆人">
                        <Option v-for="item in userList" :value="item.id" :key="item.id">{{
                            item.username
                            }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="项目描述" prop="description">
                    <Input v-model="productForm.description" type="textarea" :rows="4" placeholder="请输入"/>
                </FormItem>
                <FormItem label="是否公开">
                    <el-switch v-model="productForm.is_private" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
    </Card>
</template>

<script>
import {projectAdd, projectDel, projectDetail, projectEdit, searchProject, userList} from "@/utils/api";

const columns = [
    {
        title: '项目名称',
        key: 'name'
    },
    {
        title: '创建人员',
        key: 'created_user'
    },
    {
        title: '创建时间',
        key: 'created'
    },
    {
        title: '修改时间',
        key: 'updated'
    },
    {
        title: '操作',
        slot: 'action',
        width: 150,
        align: 'center'
    }
]
export default {
    name: "list",
    data() {
        return {
            columns,
            data: [],
            userList: [],
            id: 0,
            edit: false,
            visible: false,
            title: "新增项目",
            loading: null,
            memberOptionData: [{"name": "是", "value": 1}, {"name": "否", "value": 0}],
            privateOptionData: [{"name": "公开", "value": 0}, {"name": "私有", "value": 1}],
            searchForm: {
                name: "",
                member_me: 1,
                is_private: 1,
                page: 1,
                size: 10
            },
            productForm: {
                name: "",
                participants: [],
                description: "",
                is_private: false
            },
            selectedParticipants: [], // 编辑模式下的当前项目参与用户
            ruleProductForm: {
                name: [
                    {required: true, message: '项目名称必填', trigger: 'blur'}
                ],
                members: [
                    {type: 'array', required: true, message: '请选择项目成员', trigger: 'change'}
                ],
            },
            total: 0,
        }
    },
    created() {
        this.query()
        this.getUserList()
    },
    methods: {
        handleReset() {
            this.searchForm.name=""
            this.searchForm.is_private=1
            this.searchForm.member_me=1
        },
        memberChange(data) {
            this.searchForm.member_me = data
        },
        privateChange(data){
            this.searchForm.is_private = data
        },
        handleEdit(id) {
            this.getProjectDetail(id)
            this.visible = true;
            this.title = "编辑项目";
            this.edit = true;
            this.id = id;
        },
        remove(id) {
            this.$Modal.confirm({
                title: "删除提示",
                content: "是否确认删除？",
                okText: "确认",
                cancelText: "取消",
                onOk: async () => {
                    projectDel({id: id}).then(res => {
                        if (res.data.result === 1){
                            this.$Message.success("删除成功!")
                            this.query();
                            return;
                        } else {
                            this.$Message.error(res.data.error_message)
                        }
                    })
                }
            })
        },
        addProduct() {
            this.visible = true;
            this.title = "新增项目";
        },
        ok() {
            this.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    if (!this.edit) {
                        projectAdd(this.productForm).then(res => {
                            if (res.data.result === 1) {
                                this.$Message.success("创建项目成功!")
                                this.cancel()
                                this.query()
                                return;
                            } else {
                                this.$Message.error(res.data.error_message)
                                return;
                            }
                        })
                    } else {
                        this.productForm.participants = this.selectedParticipants.participants
                        this.productForm.id = this.id
                        projectEdit(this.productForm).then(res => {
                            if (res.data.resutl === 1){
                                this.$Message.success("编辑成功!");
                                this.cancel();
                                this.query();
                            } else {
                                this.$Message.error(res.data.error_message)
                            }
                        })
                    }
                }
            })
        },
        cancel() {
            this.id = 0;
            this.edit = false;
            this.$refs['formValidate'].resetFields();
            this.visible = false;
        },
        handleChange(e) {
            this.searchForm.page = e;
            this.query();
        },
        handleSize(e) {
            this.searchForm.size = e
            this.query()
        },
        query() {
            // 查询，获取项目列表
            this.loading = true
            searchProject(this.searchForm).then(res => {
                this.data = res.data.data.list;
                this.loading = false;
                this.total = res.data.data.total
            })
        },
        getUserList() {
            // 获取用户列表
            userList().then(res => {
                this.userList = res.data.data
            })
        },
        getProjectDetail(id) {
            // 获取项目详情
            projectDetail(id).then(res => {
                if (res.data.result === 1){
                    this.productForm.name = res.data.data.project.name;
                    this.productForm.description = res.data.data.project.description;
                    this.selectedParticipants = res.data.data.project.participants.map(participant => participant.user_id);
                    this.productForm.participants = [...this.selectedParticipants]
                    this.productForm.is_private = res.data.data.project.is_private;
                    this.id = id;
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
